
<template>
  <div id="app">
    <div>
      <el-container>
        <!-- 顶部 -->
        <el-header>
        <el-menu
          
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b" id="top">
          <el-menu-item index="1">处理中心(预留)</el-menu-item>
          <el-submenu index="2">
            <template slot="title">个人中心</template>
            <el-menu-item index="2-1">账号安全</el-menu-item>
            <el-menu-item index="/center">个人信息</el-menu-item>
            <el-menu-item index="/Account"  @click="loginOut">注销账号</el-menu-item>
          </el-submenu>
        </el-menu>
        </el-header>
      <!-- 左侧目录区 -->
 
        <el-container>
          <el-aside width="200px">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
          <el-radio-button :label="false">open</el-radio-button>
          <el-radio-button :label="true">close</el-radio-button>
        </el-radio-group>
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @select="handleSelect" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
          
           <el-submenu index="1" v-show="HouseShow">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">房源管理</span>
            </template>
            <el-menu-item-group v-show="HouseShow01">
              <el-menu-item index="/House">房源中心</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

<<<<<<< HEAD
          <el-menu-item index="2" v-show="CustomerShow">
=======
          <el-submenu index="2">
            <template slot="title">
>>>>>>> a179e7bdb6a1172ad9caf13d2f08cb0b9d5de2b8
            <i class="el-icon-c-scale-to-original"></i>
            <span slot="title">客户中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/Kehu">客户管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

         <el-submenu index="3" v-show="EmpShow">
            <template slot="title">
              <i class="el-icon-help"></i>
              <span slot="title">员工管理</span>
            </template>
            <el-menu-item-group>
<<<<<<< HEAD
              <el-menu-item index="/Emp" v-show="EmpShow01">员工中心</el-menu-item>
=======
              <el-menu-item index="/Emp">员工管理</el-menu-item>
>>>>>>> a179e7bdb6a1172ad9caf13d2f08cb0b9d5de2b8
            </el-menu-item-group>
          </el-submenu>

          

            <el-submenu index="4" v-show="SaleShow">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span slot="title">销售中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/EverAppointment" v-show="SaleShow01">预约中心</el-menu-item>
              <el-menu-item index="/ManagerOrder" v-show="SaleShow02">订单中心</el-menu-item>
              <el-menu-item index="/SalRecord" v-show="SaleShow03">销售记录</el-menu-item>
              
            </el-menu-item-group>
              <!-- 以下可以实现三级目录 -->
            <!-- <el-submenu index="1-4">
            </el-submenu> -->
          </el-submenu>


          <!-- <el-menu-item index="5">
            <i class="el-icon-goods"></i>
            <span slot="title">权限管理</span>
          </el-menu-item> -->
          <el-submenu index="5" v-show="PermissionShow">
            <template slot="title" >
              <i class="el-icon-s-promotion"></i>
              <span slot="title" >权限管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/erDistribution" v-show="PermissionShow01">员工-角色</el-menu-item>
              <el-menu-item index="/rpDistribution" v-show="PermissionShow02">角色-权限</el-menu-item>
                </el-menu-item-group>
          </el-submenu>

        <el-submenu index="6" v-show="MoneyShow">
            <template slot="title" >
              <i class="el-icon-location"></i>
              <span slot="title" >财务管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/User" v-show="MoneyShow01">员工薪资</el-menu-item>
              <el-menu-item index="/Company" v-show="MoneyShow02">公司流水</el-menu-item>
            </el-menu-item-group>
              <!-- 以下可以实现三级目录 -->
            <!-- <el-submenu index="1-4">
            </el-submenu> -->
          </el-submenu>

         <el-submenu index="7" v-show="ReportShow">
            <template slot="title" >
              <i class="el-icon-picture-outline-round"></i>
              <span slot="title" >报表管理</span>
            </template>
            <el-menu-item-group v-show="ReportShow01">
              <el-menu-item index="/Report">报表中心</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

           <el-submenu index="8" v-show="LogShow">
            <template slot="title" >
              <i class="el-icon-location"></i>
              <span slot="title">日志中心</span>
            </template>
            <el-menu-item-group v-show="LogShow01">
              <el-menu-item index="/Log">日志管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- mqf -->
        <el-submenu index="9" v-show="ZhiyeShow">
           <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span slot="title">我的置业中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/selfAppt" v-show="ZhiyeShow01">我的预约</el-menu-item>
              <el-menu-item index="/selford" v-show="ZhiyeShow02">我的订单</el-menu-item>
              <el-menu-item index="/selfsalrecord" v-show="ZhiyeShow03">我的销售记录</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
        </el-menu>
        </el-aside>

          <!-- 右侧功能展示区 -->
          <el-main> <router-view></router-view></el-main>
        </el-container>
      </el-container>
    </div>

  </div>
</template>

<style>
  .el-header{
    background-color: #545c64;
    color: #010913;
    text-align: center;
    line-height: 115px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    /* line-height: 200px; */
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    /* text-align: center; */
    /* line-height: 550px; */
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  /* .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 600px;
  } */
  
  /* .el-container:nth-child(7) .el-aside {
    line-height: 600px;
  } */

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  #top{
    margin-left: 80%;
  }
</style>


<script>
import { mapMutations } from 'vuex';
  export default {
     
    data() {
      return {
        isCollapse: false,
        vueShow:"",
        urls:"",
      
        parentShow:[{
          HouseShow:false,
          CustomerShow:false,
          EmpShow:false,
          SaleShow:false,
          PermissionShow:false,
          MoneyShow:false,
          ReportShow:false,
          LogShow:false,
          ZhiyeShow:false
        }],
        childShow:[{
          HouseShow01:false,

          CustomerShow01:false,

          EmpShow01:false,

          SaleShow01:false,
          SaleShow02:false,
          SaleShow03:false,

          PermissionShow01:false,
          PermissionShow02:false,

          MoneyShow01:false,
          MoneyShow02:false,

          ReportShow01:false,

          LogShow01:false,
          ZhiyeShow01:false,
          ZhiyeShow02:false,
          ZhiyeShow03:false,
        }]
      
      
      };





    },
    computed:{
      ...mapMutations(['changeLogin'])
    },
    created() {
      this.urls=this.$store.state.urls
         this.HouseShow= this.urls.includes("HouseShow")==true?true:false
           this.HouseShow01= this.urls.includes("House")==true?true:false
         this.CustomerShow= this.urls.includes("CustomerShow")==true?true:false
           this.CustomerShow01= this.urls.includes("Kehu")==true?true:false
         this.EmpShow= this.urls.includes("EmpShow")==true?true:false
           this.EmpShow01= this.urls.includes("Emp")==true?true:false
         this.SaleShow= this.urls.includes("SaleShow")==true?true:false
           this.SaleShow01= this.urls.includes("EverAppointment")==true?true:false
           this.SaleShow02= this.urls.includes("ManagerOrder")==true?true:false
           this.SaleShow03= this.urls.includes("SalRecord")==true?true:false
         this.PermissionShow  =this.urls.includes("PermissionShow")==true?true:false
           this.PermissionShow01  =this.urls.includes("erDistribution")==true?true:false
           this.PermissionShow02  =this.urls.includes("rpDistribution")==true?true:false
         this.MoneyShow  =this.urls.includes("MoneyShow")==true?true:false
           this.MoneyShow01  =this.urls.includes("User")==true?true:false
           this.MoneyShow02  =this.urls.includes("Company")==true?true:false
        this.ReportShow  =this.urls.includes("ReportShow")==true?true:false
          this.ReportShow01  =this.urls.includes("Report")==true?true:false
         this.LogShow  =this.urls.includes("LogShow")==true?true:false
          this.LogShow01 =this.urls.includes("Log")==true?true:false
         this.ZhiyeShow =this.urls.includes("ZhiyeShow")==true?true:false
          this.ZhiyeShow01 =this.urls.includes("selfAppt")==true?true:false
          this.ZhiyeShow02 =this.urls.includes("selford")==true?true:false
          this.ZhiyeShow03 =this.urls.includes("selfsalrecord")==true?true:false
          
    },
    methods: {
      
  
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSelect(key, keyPath) {
        this.$router.push('/')
        this.$router.push(key)
        console.log(key, keyPath);
      },

      loginOut(){
          
        this.changeLogin({ Authorization: 'false',role:''});
        
        alert(this.$store.state.Authorization)
       
      }
    }
  }
</script>